import { Input, NavBar, TextArea } from 'antd-mobile';

import styles from './index.module.scss';
import { useState } from 'react';
type Props = {
  onClose: () => void;
  value: string;
  type: InputType;
  onUpdateProfile: (type: Exclude<InputType, ''>, value: string) => void;
};
const EditInput = ({ onClose, value, onUpdateProfile, type }: Props) => {
  const [name, setName] = useState(value);
  const isEditName = type === 'name';
  // useEffect(() => {
  //   setName(value);
  // }, [value]);
  return (
    <div className={styles.root}>
      <NavBar
        className="navbar"
        onBack={onClose}
        right={
          <span
            className="commit-btn"
            onClick={() => {
              if (type === '') return;
              onUpdateProfile(type, name);
            }}
          >
            提交
          </span>
        }
      >
        编辑{isEditName ? '昵称' : '简介'}
      </NavBar>

      <div className="edit-input-content">
        <h3>{isEditName ? '昵称' : '简介'}</h3>
        {isEditName ? (
          <div className="input-wrap">
            <Input
              value={name}
              onChange={(val) => {
                setName(val);
              }}
              placeholder="请输入"
            />
          </div>
        ) : (
          <TextArea
            placeholder="请输入内容"
            value={name}
            maxLength={100}
            rows={4}
            showCount
            onChange={(val) => {
              setName(val);
            }}
          />
        )}
      </div>
    </div>
  );
};

export default EditInput;
